
{% extends 'base.html' %} {% block css%}
<style type="text/css">

    img{
        width: 100%;
        height: auto;
        border: 1px solid #ccc;
    }
</style>
{% endblock %} {% block body%}


<div class="row">

<div class="col-md-3">
    <h2>OPERATION</h2>

    <table class="table table-hover form-inline">
        <tr>
            <td style="font-size: 12px" width="20%">Marker</td>
            <td>
                <input class="form-control" type="text" style="width:180px; height:30px" id="marker" value="Room #1" />
                
            </td>
        </tr>
        <tr>
            <td style="font-size: 12px" width="20%">Location</td>
            <td>
                <select class="form-control" style="width:180px; height:30px" id="location">
                    <option>Location #1</option>
                    <option>Location #2</option>
                    <option>Location #3</option>
                    <option>Location #4</option>
                </select>
                &nbsp;&nbsp;
                <i class='glyphicon glyphicon-refresh' id='location_list'></i>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <button class="btn btn-block btn-success" id="btn_marker">
                Marker <i class='glyphicon glyphicon-map-marker'></i>
                </button>
            </td>
        </tr>


        <tr>
            <td colspan="2">
                <button class="btn btn-block btn-danger" id="btn_autorun">
                Auto-Run
                </button>
            </td>
        </tr>


        <tr>
            <td colspan="2">
                <button class="btn btn-block btn-danger" id="btn_capture_all_cameras" onclick="captureCameraAll()">
                Capture All Cameras
                </button>
            </td>
        </tr>


    </table>
 
 

</div>

<div  class="col-md-9">
    <h2>CAMERAS STREAMS</h2>
    <div class="row">



        {% for cam_idx in camera_index %}

        <!-- skip notebook camera-->
         
        <!-- {//% if cam_idx != 0 %} -->

        <div class="col-md-4">
            <img id="camera_{{ cam_idx }}">
            <button class="btn btn-lg btn-primary btn-block" onclick="captureCamera({{ cam_idx }})">
                Capture Camera #{{ cam_idx }} <i class='glyphicon glyphicon-camera'></i>
            </button>
        </div>

        <!-- {//% endif %} -->
        
        {% endfor %}
    </div>
</div>

{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">


// 建立WebSocket连接
var socket = io.connect('http://' + document.domain + ':' + location.port);

// 监听从后端传来的视频帧数据
socket.on('video_frame', function(data) {
    var imgElement = document.getElementById('camera_' + data.camera_id);
    imgElement.src = 'data:image/jpeg;base64,' + data.frame;  // 将base64编码的帧数据显示为图片
});



function captureCamera(camera_id) {
    // 发送WebSocket事件到服务器
    socket.emit('capture_camera', { camera_id: camera_id });
}


function captureCameraAll() {
    // 发送WebSocket事件到服务器
    socket.emit('capture_camera_all');
}


// 监听服务器的响应
socket.on('response', function(data) {
    console.log('Success:', data);
    //toastr["success"]( "Cam #" + data.camera_id + ' captured.' + ' Saved as: ' + data.save_path);
    toastr["success"]( "Captured OK." );
});

function btn_cap(idx)
{
   // alert('btn_cap'+idx);
    $.post(
        "/capture", {
            idx: idx,
        },
        function(data, status) {
            console.log("data: " + data);
            toastr["success"](data);
        }
    );
}


$(document).ready(function() {
    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center"
    }


    
});
</script>
{% endblock %}